<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉服荟</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <script src="./axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            background-position: center;
            width: 100%;
            height: 760px;
            background-size: cover;
            background-repeat: no-repeat;
            z-index: -1;
            background-image: url(https://pic.hanfugou.com/web/2019/8/30/15/edfd8d6a7e684902834fb9bf9cb95e64.jpeg_2000.jpg )
        }

        .main-1 {
            width: 360px;
            height: 380px;
            background-color: #fff;

        }

        div .main-1 .main-1-1 {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 22px;
            text-align: center;
            border-bottom: 1px #ddd solid;
        }


        .main-2 span {
            width: 50px;
            height: 38px;
            text-align: center;
            /* border-radius: ; */
        }

        .main-2 input {
            /* height: 20px; */
            padding: 9px;
            line-height: 20px;
            border-width: 1px;
            border-style: solid;
            border-radius: 2px;
            border: 1px #e6e6e6 solid;
        }

        .main-2 p:nth-child(1) {
            width: 280px;
            border: 1px #e6e6e6 solid;
        }

        input {
            color: #555;
            ;
            font-size: 14px;
            border: 0;
            outline: 0;
        }

        p {
            font-size: 14px;
        }

        .main-4 span:nth-child(1) {
            margin: 0 0 0 32px;

        }

        .main-4 span:nth-child(2) {
            margin: 0 0 0 20px;
        }

        .main-4 span:hover {
            color: #ff6699;
        }

        a {
            text-decoration: none;
        }

        .main-5 a button:hover {
            color: #c9c9c9;
            background-color: #fff;
        }

        ul a {
            width: 50px;
            height: 50px;
            display: inline-block;
            margin: 10px 41px 0 0;
            background: url(https://public.hanfuhui.com/Image/icon_login_thrid.png) no-repeat;
        }

        .main-6 i {
            color: white;
            font-style: normal;
            margin: 0 10px;
        }

        .food a {
            color: white;
        }

        .food a:hover {
            color: #ff6699;

        }
    </style>
</head>

<body>
    <!-- jd.com/favicon.ico》   ico图标 -->
    <header>
        <div></div>
        <div class="main" style="width:1100px ; margin: auto;">
            <img src="https://public.hanfuhui.com/Image/logo_pc.png?v=1" alt="" style=" margin: 80px auto 0;">
            <div class="main-1" style="margin: -15px 0 0 740px;">
                <p class="main-1-1">登录</p>
                <div style="margin-top: 30px;">
                    <div class="main-2" style="margin: 0 0 0 38px;">
                        <p> <span style="color: #ff6699;">+86</span>
                            <input type="text" value="" style="border: 0;outline: 0;" placeholder="手机/小荟号">
                        </p>
                        <p class="main-3"
                            style="width: 280px; height: 38px;  border: 1px #e6e6e6 solid; margin-top: 15px;"><input
                                type="text" placeholder="密码" style="border: 0;
                                outline: 0; "></p>
                        <p class="main-4"><input type="checkbox" style="margin-top: 15px;"> 下次自动登录 <a href="">
                                <span>使用密码</span>
                                <span>忘记密码</span></a></p>
                        <p class="main-5"><button style="background-color: #ff6699; width: 133px;border: 0; margin-top: 5px;
                                outline: 0; height: 40px; color: #fff;" id="button">登录</button>
                            <a href="./注册.html"><button
                                    style="width: 131px; height: 38px;margin: 0 0 0 10px; border: 1px solid #C9C9C9; ">注册</button></a>
                        </p>
                    </div>
                    <ul style="margin: 20px 0 0 57px;">
                        <a href=""></a>
                        <a href="" style="background-position: -50px 0;"></a>
                        <a href="" style=" background-position: -100px 0;"></a>
                    </ul>
                </div>
            </div>
            <div class="food" style="text-align:center ; margin-bottom: 40px; margin-top: 120px; color: white;">
                <div class="main-6">
                    <a href="">关于我们</a>
                    <i>|</i>
                    <a href="">社区公约</a>
                    <i>|</i>
                    <a href="">用户协议</a>
                    <i>|</i>
                    <a href="">隐私政策</a>
                    <i>|</i>
                    <a href="">帮助我们</a>
                </div>
                <div class="main-7" style="margin-top: 15px;">
                    Copyright ©2018 深圳市汉服荟网络科技有限公司 版权所有 <a href="">粤ICP备14046913号-5</a>
                </div>
            </div>
        </div>

    </header>



    <script>
        let inpt = document.querySelectorAll("input");
        let btn = document.querySelector("#button")
        var qq = false;
        inpt[0].onblur = function () {
                var zh = /^1[3|4|5|7|8][0-9]{9}$/;
                if (zh.test(this.value)) {
                    //判定this.value符不符合zh
                    qq = true;
                    //   console.log(qq)
                    //   span.innerHTML = "太对了，哥1";
                } else {
                    qq = false;
                    //   alert("您的格式不正确");
                }
                console.log(qq);

                var q1 = false;
                inpt[1].onblur = function () {
                    var zh1 = /^.{4,10}$/;
                    if (zh1.test(this.value)) {
                        //判定this.value符不符合zh
                        q1 = true;
                        //   console.log(qq)
                        //   span.innerHTML = "太对了，哥1";
                    } else {
                        q1 = false;
                        //   alert("您的格式不正确");
                    }
                    console.log(q1);
                    console.log(qq,q1)
                    btn.onclick = function () {
                        if (qq == true, q1 == true) {
                            // let inps = document.querySelectorAll("input");

                            let username = inpt[0].value;
                            let password = inpt[1].value;
                            let api = "http://jx.xuzhixiang.top/ap/api/login.php";
                            axios.get(api, {
                                params: {
                                    username,
                                    password
                                }
                            }).then((r) => {
                                console.log(r.data);
                                if (r.data.code == 1) {
                                    alert(r.data.msg);
                                    location.href = "../首页/首页.html";
                                }
                            });
                        }
                    };
                };
            }
    </script>
</body>

</html>